<template>
    <div class="content-container">
        <div class="sysdict-header">
            <el-button type="success" icon="el-icon-plus" @click="addDepartment()">添加</el-button>
        </div>
        <el-table :data="departmentData" border>
            <el-table-column prop="id" label="编号"/>
            <el-table-column prop="title" label="标题"/>
            <el-table-column prop="sn" label="编码"/>
            <el-table-column prop="intro" label="简介"/>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="editDep(scope.row)">编辑
                    </el-button>
                    <el-button type="success" icon="el-icon-plus" size="small" @click="jumpSysDetailPage(scope.row)">添加明细
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <section class="content-footer">
            <el-pagination
                    @size-change="sizeChangeFn"
                    @current-change="currentChangeFn"
                    background
                    layout="sizes, prev, pager, next, total"
                    :total="total"
                    :page-size="pageSize"
                    :page-sizes="[5, 10, 50, 100]"
            />
        </section>
        <sys-dialog
            :title="dialogTitle"
            :visible="dialogVisible"
            :formData="depForm"
            :sysId="editID"
            @closeDialog="closeDialog"
        />
    </div>
</template>

<script>
    import {getSysDictionariesApi} from '@/request/api'
    import SysDialog from './children/SysDialog'

    export default {
        name: "SystemDictionary",
        data() {
            return {
                currentPage: 1,
                pageSize: 10,
                departmentData: [],
                total: 0,
                dialogTitle: '',
                dialogVisible: false,
                editID: null,
                depForm: {
                    title: '',
                    sn: '',
                    intro: ''
                },

            }
        },
        components: {
            SysDialog
        },
        methods: {
            sizeChangeFn(val) {
                this.pageSize = val
                this.queryDepData()
            },
            currentChangeFn(val) {
                this.currentPage = val
                this.queryDepData()
            },
            // 获取部门列表数据
            queryDepData() {
                getSysDictionariesApi({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }).then(res => {
                    if (res.success === true) {
                        const data = res.data
                        this.departmentData = data.list
                        this.total = data.total
                    }
                })
            },
            // 显示部门输入框
            addDepartment() {
                this.dialogTitle = '数据字典添加'
                this.dialogVisible = true
            },

            // 编辑一条部门数据
            editDep(row) {
                this.dialogTitle = '数据字典编辑'
                this.$nextTick(() => {
                    this.depForm = {
                        sn: row.sn,
                        intro: row.intro,
                        title: row.title
                    }
                })
                this.editID = row.id
                this.dialogVisible = true
            },
            closeDialog(reload) {
                this.dialogVisible = false
                if (reload) {
                    this.queryDepData()
                }
            },
            jumpSysDetailPage(row) {
                this.$router.push({path: '/sysdictionaryitem', query: {parentId: row.id}})
            }
        },
        created() {
            this.queryDepData()
        }
    }
</script>

<style lang="less" type="text/less" scoped>
    .sysdict-header {
        margin-bottom: 10px;
    }

</style>